<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
      <el-form-item>
        <el-select v-model="formItem.s_type" filterable clearable placeholder="请选择类别" @change="onTypeChange">
          <el-option v-for="(item) in dictionaryType" :key="item.type" :label="item.text" :value="item.type" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formItem[select]"
          :placeholder="placeholder"
          class="input-with-select"
          :disabled="inputDisabled"
          clearable
          @keyup.enter.native="search"
          @change="onMixedInputChange"
        >
          <el-select slot="prepend" v-model="select" clearable placeholder="请选择" style="width: 100px;" @change="onMixedSelectChange">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-search" @click="search" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { list } from '@neu/dcam-ui/api/dictionaryType'

// 定义一个查询表单原始项
const formItem = {
  s_type: '',
  s_code: '',
  s_text: ''
}

export default {
  name: 'DictionaryTableFilter',
  data() {
    return {
      /** 字典表类型 */
      dictionaryType: [],
      formItem: {
        ...formItem
      },
      inputDisabled: true,
      select: '',
      placeholder: '',
      // 复合型输入框 option
      options: [
        { value: 's_code', label: '字典编码' },
        { value: 's_text', label: '字典名称' }
      ]
    }
  },
  mounted() {
    list().then(response => {
      this.dictionaryType = response.data
    })
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    },
    // 复合型输入框 input 值改变事件
    onMixedInputChange(value) {
      if (value === '') {
        this.search()
      }
    },
    // 复合型输入框 select 值改变事件
    onMixedSelectChange(value) {
      this.options.find((option) => {
        if (option.value === value) {
          this.placeholder = '请输入' + option.label
        }
        this.formItem[option.value] = ''
      })
      this.inputDisabled = false
      // 清空时，触发查询
      if (value === '') {
        this.search()
        this.inputDisabled = true
        this.placeholder = ''
      }
    },
    onTypeChange(value) {
      this.search()
    }
  }
}
</script>
